[00:00] Welcome back everyone. Let's keep developing our smaller station details view. Now, the idea is I want to have three buttons one for each of our stations. I want my users to be able to click one of these buttons. And then we will show the data from that particular station on our data cards up above. Now there's actually a couple of ways we could approach this here. One approach we could take here. Would be to write a very simple script on each of our buttons that simply changed the value of the station number view parameter. Now, while that is a solid approach and it would absolutely work. Our project this far has utilized a page configuration that accepts a URL parameter that's more or less how our top nav views work right now. They simply re-triggered navigation to the same page but with a different URL parameter. So I think I'd like to try to implement a similar solution on these buttons. So let's double click the flex container so that it deeply selects the container. And then we'll single select the button here.

[01:02] Let's set this to grow as well. So we'll change the grow property there to one. So it takes up all of the width. Let's change the text so that it says station 1 and let's actually change the name of the button. So if I scroll down so, as it appears in the project browser since I'm just calling it button, how about a button 1? So I'll put a space in one and hit Enter. And since we're over here let's make some style changes to the button. Let's increase the font size so that it matches the font size on our data cards. And then let's also add a margin around the button. So let's head over to the style editor. Let's change the text to 30 and let's head up to margin and padding. And we'll add a little bit of a margin. Last time we went with eight pixels of padding and yeah that actually looks fine to me. So let's go with that and click OK. Now I'm going to pause for a quick aside here. Some of you are probably wondering, hey, we use the same margin settings and font settings on all of the components here on the screen. Why don't we make a style class out of it and reasonably, yeah, we could, but I don't really plan on adding too many more mobile specific screens to this project it's really going to be just this one screen, that's getting the treatment.

[02:10] So it'd be a little extra work to go create style class and then come back here and apply it to everything. So no real reason to do it right now. However, if this project was a lot larger in scope it had a lot more screens that needed to be available on the mobile side of things then yeah, absolutely creating a style class with those settings would have been an ideal move. All right. So now we need this button to actually do something when our users press it. And the way you do that in perspective is with the component actions and events which is something we haven't really used in this series yet. So the idea behind it is that components all have events that can happen to them. So such as a text composition begins in the component or the, the user clicks on the component, stuff like that. And then we can pair up a bunch of different actions that can occur. Actions can be as complex as a Python script that runs or they can be some of these sort of built in actions such as navigation, which is what we're going to use. The way you look at the events and actions is for any components.

[03:03] So I have this button selected here. I'm going to right click on the button and I'll click on configure events. And this brings up the event configuration for button 1 here. So we could use the on click event. However, buttons do have a dedicated on action performed which basically means you press the button regardless of how it was pressed or clicked or tapped, or what have you. Now that we have an event selected we can come up here and press the plus button which brings up a list of available actions. We do have documentation that covers all of these. So if you wanted to learn more, you can but for this lesson, we'll select the navigation action. There's a couple different types of navigation. We did talk about that a little bit with the horizon menu components but we want to stick with the page navigation and we want to navigate to the station details page. So if you click the little drop down here it does have a list of the available page configurations. So we actually want to go to the station details/stationnumber again. So we'll go here, but instead of having the parameter at the end, we're going to actually hard code this one. So when they click this specific button it'll try to navigate to the station details/1.

[04:07] So we'll click OK here. And then we will duplicate this button. So again, with this button selected, I'll right click on it. Let's duplicate it. Let's start new button let's change the text. So that says button station 2. We don't have to change the name. The designer went ahead and changed the name for us but we will have to update the event or I should say we'll have to update the action. So I'll right click on station 2 button. We'll go to configure events. Let's change that 1 to a 2 and then click OK. Let's duplicate that again. Or right clicking the button. Or duplicate. We will change this new button to station 3. And then of course we will right click on the button configure events and we'll change the 2 2 to a 3 and click OK. And now it seems like a good time to save your project.

[05:04] All right. That wraps up this video here. So we finished our station details small. We also have a station details large. So the next step would be to get a breakpoint container somewhere and put both of these station detail views in there and make them both available to our session. So I'll see you then.